<script setup lang="ts">
const props: any = defineProps<{
    ujt: any;
    id?: any;
}>();
const { $global } = props.ujt;
</script>

<template>
    <template v-if="$global.pop[props.id].notit"></template>
    <div
        class="as-pop-drag-bar"
        :id="'popbar' + id"
        v-else-if="$global.pop[props.id].nodrag"
    >
        <slot></slot>
    </div>

    <div
        class="as-pop-drag-bar"
        :id="'popbar' + id"
        v-else-if="$global.pop[props.id].full == 2"
        v-drag="{
            domarea: 'pop' + id,
            dommask: 'popmask' + id,
        }"
    >
        <slot></slot>
    </div>
    <div
        class="as-pop-drag-bar"
        :id="'popbar' + id"
        v-else-if="$global.pop[props.id].full == 1"
        v-dragzoom="{
            ujt,
            dom: 'popbar' + id,
            domarea: 'pop' + id,
            // dom: {
            //     drag: 'popbar' + id,
            //     dragarea: 'pop' + id,
            // },
        }"
    >
        <slot></slot>
    </div>
    <div
        class="as-pop-drag-bar"
        :id="'popbar' + id"
        v-else
        v-dragzoom="{
            ujt,
            dom: 'popbar' + id,
            domarea: 'pop' + id,
            // dom: {
            //     drag: 'popbar' + id,
            //     dragarea: 'pop' + id,
            // },
        }"
    >
        <slot></slot>
    </div>
</template>

<style scoped lang="scss">
.as-pop-drag-bar {
    user-select: none;
    border-radius: 18px 18px 0 0;
    padding: 10px 16px;
    border-bottom: 1px solid var(--ch4);
    background-color: var(--ch2);
    color: var(--ch8);
    font-size: var(--fs3);
    display: flex;
}
</style>
